CSS（Cascading Style Sheets），即层叠样式表，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。

本文将 CSS 的众多属性做了一个总结，这包括：

字体
文本
选择器
元素显示模式
背景
三大特性
页面布局

字体

CSS Fonts（字体）属性用于定义字体的种类、大小、粗细和文字样式（如斜体）。

属性	说明
font-style	样式
font-weight	粗细
font-size	大小
font-family	种类
font	简写

样式—— font-style

该属性的值包括：

属性值	说明
normal	默认
italic	斜体

一般使用斜体标签（em、i ）来代替italic，若需将该标签改为不倾斜字体，you can do this：

1
2
3

em {
  font-style: normal;
}

粗细—— font-weight

该属性的值包括：

属性值	说明
lighter	细体（100）
normal	默认（400）
bold	粗体（700）
bolder	特粗体（900）
number	数字

body {
  font-weight: bold;  
  /* 推荐下面的写法 */
  font-weight: 700;
}

大小—— font-size

该属性一般给 body 指定字体大小：

1
2
3

body {
  font-size: 20px;
}

种类—— font-family

该属性一般给 body 指定字体种类：

body {
  font-family: 微软雅黑;
  /* 若第一个字体未找到，将查找第二个字体 */
  font-family: 'Microsoft Yi Baiti',微软雅黑;
}

复合属性—— font

该属性可以将以上属性一次性全部定义完成：

body {
  /* 必须按以下顺序属性，不需要设置的属性可以省略，但 size 和 family 必须存在*/
  font: font-style font-weight font-size/line-height font-family;
  /* 示例一：*/
  font: normal 700 16px '微软雅黑';
  /* 示例二：*/
  font: 16px '黑体';
}

文本

CSS Text（文本）属性可定义文本的外观，如文本的颜色、对齐、装饰、缩进、行间距等。

属性值	说明
color	文本颜色
text-align	文本对齐方式
text-decoration	文本修饰
text-indent	文本缩进
line-height	文本行高

颜色—— color（略）

对齐—— text-align

该属性用来设置文本的水平对齐方式：

属性值	说明
left	左对齐（默认）
right	右对齐
center	居中对齐

修饰—— text-decoration

该属性可以编辑文本的下划线，详见下表：

属性值	说明
none	默认
underline	下划线
overline	上划线
line-through	删除线

缩进—— text-indent

该属性用来指定文本第一行的缩进，通常是将段落的首行缩进 2 个文字大小：

1
2
3

p {
  text-indext: 2em;
}

行间距—— line-height

该属性用来设置行间的距离（行高），可控制文字行与行之间的距离：

1
2
3

p {
  line-height: 26px;
}

注意哦：行间距由以下 3 部分组成：

上间距
文本高度
下间距

选择器

CSS 的选择器众多，详见下表：

选择器	说明	用法
通配符选择器	选择所有的标签	*
类选择器	选择一或多个标签	.
标签选择器	选择所有相同的标签	如 p
id 选择器	选择一个标签	#
后代选择器	选择父标签的子孙标签	如 ul li
子选择器	选择父标签的子标签	如 div > a
并集选择器	各选择器通过`,`连接	如 p,ul
链接伪类选择器	向链接添加特殊效果	见后续
`:focus`伪类选择器	用于选取获得焦点的表单元素	如 input:focus

注意哦：加粗部分为基础选择器，可被复合选择器（未加粗部分）使用

链接伪类选择器

属性值	说明
a:link	所有未被访问的链接
a:visited	所有已被访问的链接
a:hover	鼠标位于其上的链接
a:active	活动链接（鼠标按下但未弹起）

注意哦：必须按上表顺序使用

元素显示模式

元素显示模式：HTML 元素（标签）以什么方式进行显示。
HTML 元素一般分为块元素和行内元素。

块级元素

块级元素包括<div>、<h1> ~ <h6>、<p>、<ul>、<ol>、<li>。

块级元素特点如下：

独占一行
高度、宽度、内外边距都可控制
宽度默认为容器（父级宽度）的 100 %
其中可放块元素或行内元素
文字类元素（如 <h1> ~ <h6>，<p>）不能放块级元素

行级元素

行级元素包括<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>。

行级元素特点如下：

相邻行内元素在一行上，一行可显示多个
高宽设置无效
默认宽度为其本身内容的宽度
行内元素只能容纳文本元素或其他行内元素（但链接里不能放链接）

行内块元素

行级元素中有几个特殊的元素<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
行内块元素特点如下：

相邻行内元素在一行上，一行可显示多个（行内元素特点）
默认宽度即本身内容宽度（行内元素特点）
高度、宽度、内外边距都可控制（块级元素特点）

块行元素间转换

通过 display 属性可以将块级元素和级行元素进行转换：

display: block：转换为块级元素
display: inline：转换为行级元素
display: inline-block：转换为行内块元素

背景

CSS 背景属性可以给页面元素添加背景样式，详见下表：

属性	说明	属性值
background-color	背景颜色	颜色值/十六进制/ RGB
background-image	背景图地址	url(路径)
background-repeat	是否平铺背景图	repeat（默认纵横）/no-repeat/repeat-x（横）/repeat-y（纵）
background-attachment	背景图附着	scroll（滚动）/fixed（固定）
background-position	背景图位置	默认水平垂直居中如`center`（等价于`center center`）
background-size	背景图大小	默认（`auto`）不改变背景图高度和宽度常用`cover`属性将背景图等比缩放以填满整个容器
background	简写	习惯按以上顺序，若不设置其中某值，也不会出问题如`background: url('..') no-repeat center/cover`
reba	背景色半透明	background:rgba(0,0,0,0.3); 必须为 4 个值

三大特性

CSS 中有 3 个非常重要的特性：

层叠性
继承性
优先级

层叠性

若对相同的选择器设置相同的样式属性，则会发生冲突。如：

<style>
  div {
    color: red;
  }
  div {
    color: blue;
  }
</style>
<body>
<div>我是什么颜色？</div>
</body>

对样式冲突问题，层叠性会遵循就近原则，即哪个样式离元素近，就执行哪个样式。

继承性

CSS 中的继承可使子元素继承父元素的某些样式，如文本颜色和字体属性。
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
但需注意的是！只有以下相关的属性样式才会被继承：

text（文本相关）
font（字体相关）
line（行相关）
color（颜色相关）

优先级

若对同一个元素指定多个选择器，则会根据不同的优先级执行不同的操作：

若选择器相同，则根据层叠性的就近原则执行
若选择器不同，则根据选择器的权重执行

选择器权重如下表：

选择器	权重
继承或通配符选择器	0,0,0,0
标签选择器	0,0,0,1
类、伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 `style=""`	1,0,0,0
`!important`	无穷大

但需注意 2 点：

若某元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0
若为复合选择器，则会产生权重叠加的问题，需要计算权重，如
- div ul li –> 0,0,0,3
- .nav ul li –> 0,0,1,2
- a:hover –> 0,0,1,1
- .nav a –> 0,0,1,1

页面布局

页面布局的实质是用 CSS 来摆放盒子，CSS 提供了 3 种传统的布局方式：

文档流（亦称标准流、普通流）
浮动
定位

在了解它们之前，先认识下什么是盒子模型

盒子模型

所有 HTML 元素可以看作盒子，在 CSS 中，box model这一术语在设计布局时使用。
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型（Box Model）：

盒子模型的组成

不同部分的说明：

Content（内容）：显示文本和图像
Padding（内边距）：边框和内容之间的区域
Border（边框）：外边距和内边距之间的区域
Margin（外边距）：和其他盒子的间隔区域

注意哦：由于网页元素可能带有默认的内外边距，且不同浏览器的默认边距也可能不同，因此，一般在布局前，首先需清除下网页元素的内外边距：

* {
  padding: 0;
  margin: 0;
}

盒子尺寸

在 CSS 盒子模型的默认定义里，对一个元素所设置的width与height只会应用到这个元素的内容区。
若该元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
这意味着在调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距，因此实现响应式布局时，该特点尤其烦人。

这导致的直接结果是当我们希望页面呈现的盒子的宽度是 200px 的时候，我们需要减去它的左右补白（padding）和左右边框（border），然后设置为对应的 CSS 宽度。

幸运的是，我们有更好的方法达到我们想要的目的，那就是box-sizing属性啦，其可以设置 3 个值：

content-box：默认值。若设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中
border-box：设置该值后将告诉浏览器：你想设置的边框和内边距的值是包含在width内的。换而言之，若你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去border + padding的值。大多数情况下，这使得我们更容易地设定一个元素的宽高
inherit：继承父元素的box-sizing属性值

注意哦： box-sizing不包含margin

盒子边框角

CSS 的border-radius属性可以设置盒子外边框的圆角，其语法如下：

1
2
3

div {
  border-radius: length;
}

length可以设置为具体的数字或百分比形式。
下面为length的常见值及场景：

border-radius: 50%;：将正方形盒子想要设置为圆（亦可为高宽度一半）
border-radius: height * 0.5：设置为矩形高度的一半

盒子阴影

CSS 的box-shadow属性可以为盒子添加阴影，其语法如下：

1
2
3

div {
  box-shadow: h-shadow v-shadow blur spread color inset;
}

具体说明见下表：

属性值	说明
h-shadow（必填）	水平阴影所在 X 轴的位置，允许负值
v-shadow（必填）	垂直阴影所在 Y 轴的位置，允许负值
blur	模糊距离（阴影虚实程度）
spread	阴影的大小
color	阴影的颜色（如`rgba(0,0,0,3);`）
inset	将外部阴影（默认）改为内部阴影

页面布局

文档流

文档流是最基本的布局方式，该布局的元素（标签）会按规定好的方式排列，如：

块级元素（如h1、div、table）会独占一行，从上到下顺序排列
行级元素（如span、a、em）则从左到右顺序排列，碰到父元素边缘则自动换行

浮动

浮动可以让多个块级元素在一行内进行显示。
浮动使用float属性，当对某个元素添加该属性后，其会根据属性值来确定位置。
float属性的取值如下表：

属性值	说明
none	不浮动（默认）
left	向左浮动
right	向右浮动

浮动的元素具有以下特点：

不在保留原先的位置，因此未浮动元素（文本元素除外）会占其位
若多个元素都设置了浮动，则它们会按照属性值在一行内显示且顶端对齐排列
若父元素无法装下浮动的元素，则多余元素会另起一行对齐
浮动后的元素具有行内块元素的特点

浮动清除

当浮动的元素影响后续布局时，就需要清除浮动了。
清除浮动有 4 种方法：

额外标签法（clear: both;）
为父元素添加 overflow 属性（overflow: hidden;）
为父元素添加 after 伪属性
为父元素添加双伪属性

定位

定位可以使盒子自由的在某个盒子内移动位置或固定在屏幕中的某个位置，并且可以压住其他盒子。
定位由以下 2 部分组成：

定位模式：指定元素在文档中的定位方式
边偏移：确定该元素的最终位置

定位模式通过 CSS 的position属性来设置，其值和说明如下表：

属性值	定位说明	移动位置	频率
static（静态定位）	默认，无边偏移	无	少
relative（相对定位）	否（占位）	相对自身原位置	常用
absolute（绝对定位）	是（不占位）	相对父定位元素	常用
fixed（固定定位）	是（不占位）	相对浏览器可视窗口	常用
sticky（粘性定位）	否（占位）	相对浏览器可视窗口	少

边偏移属性说明如下表：

属性值	偏移量说明	示例
top	顶端	top: 5px;
bottom	底部	bottom: 0;
left	左侧	left: 5px;
right	右侧	right: 5px;

Flex 布局

什么是 Flex 布局？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

1
2
3

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

1
2
3

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意哦：设为 Flex 布局以后，子元素的以下属性将失效：

float
clear
vertical-align

基本概念

采用 Flex 布局的元素，称为 flex container。
flex container 的所有子元素自动成为 flex container 成员，称为 flex item。

flex container 默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），其中：

main start：主轴的开始位置（与边框的交叉点）
main end：主轴的结束位置
cross start：交叉轴的开始位置
cross end：交叉轴的结束位置

flex item 默认沿主轴排列，其中：

main size：单个 flex item 占据的主轴空间
cross size：单个 flex item 占据的交叉轴空间

flex container 属性

flex container 中可以设置以下 6 种属性：

属性	说明
flex-direction	定义主轴的方向（即 item 的排列方向）
flex-wrap	定义 item 是否可换行
flex-flow	以上 2 种属性的简写
justify-content	定义了 item 在主轴的对齐方式
align-items	定义了 item 在交叉轴上的对齐方式
align-content	定义了多根轴线的对齐方式

flex-direction

flex-direction属性定义主轴的方向（即 item 的排列方向），其取值及说明如下：

属性	说明
row	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上端
column-reverse	主轴为垂直方向，起点在下端

注意哦：当 flex-direction为column时，justify-content 变为垂直，而align-items变为水平。

flex-wrap

flex-wrap属性定义 item 是否可换行，其取值及说明如下：

属性	说明
nowrap	默认不换行，当空间不足 item 尺寸会随之调整而不会挤到下一行
wrap	item 主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse	item 主轴总尺寸超出容器时换行，第一行在下方

justify-content

justify-content 属性定义了 item 在主轴的对齐方式，其取值及说明如下：

属性值	说明
flex-start	左对齐（默认）
flex-end	右对齐
center	居中
space-between	两端对齐，item 间的间隔相等
space-around	每个 item 两侧的间隔相等

align-items

align-items属性定义了 item 在交叉轴上的对齐方式，其取值及说明如下：

属性值	说明
stretch	若项目未设置高度或设为 auto，将占满整个容器的高度（默认）
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐

flex item 属性

flex item 中可以设置以下 6 种属性：

属性	说明
order	定义 item 在容器中的排列顺序（值越小，排列越靠前），默认值 0
flex-grow	定义 item 的放大比例，默认值 0
flex-shrink	定义了 item 的缩小比例，默认值 1
flex-basis	定义了在分配多余空间之前，item 占据的主轴空间
flex	以上三个属性的简写
align-self	允许单个 item 有与其他 item 不一样的对齐方式

补充：水平居中

若要使行级元素或行内块元素水平居中，只需给其父元素添加以下代码：

1	text-align: center;

若要使块级元素水平居中，只需给该元素进行如下设置（任选其一）：

margin: auto;（常用）
margin: 0 auto;
margin-left: auto; margin-right: auto;

注意哦：该块级元素宽度必须已设置

参考

维基百科—— CSS